<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>飞机大战</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- 首页容器 -->
    <div id="homePage" style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; background-color: #000; color: #fff;">
        <h1 style="font-size: 48px; margin-bottom: 20px;">飞机大战</h1>
        <button id="startGameButton" style="font-size: 24px; padding: 10px 20px; cursor: pointer;">开始游戏</button>
    </div>

    <!-- 游戏内容 -->
    <canvas id="gameCanvas" width="800" height="600" style="display: none;"></canvas>
    <div id="score" style="display: none;">Score: 0</div>
    <div id="gameOver" style="display: none; position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%); font-size: 48px; color: white; z-index: 10;">
        <p>游戏结束</p>
        <button id="restartButton" style="font-size: 24px; padding: 20px; cursor: pointer; margin-top: 20px;">再来一次</button>
    </div>
    <script src="script.js"></script>
</body>
</html>